<template>
    <div class="content-box">
        <el-form ref="organizerForm" :model="form" label-width="90px">
            <el-form-item label="自定义标题" v-if="form.title">
                <el-input
                    v-model="form.title"
                    class="input-w"
                    placeholder="请输入自定义标题"
                >
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="上传图片">
                <div class="img-box">
                    <div
                        class="img-row"
                        v-for="(item, index) in form.info"
                        :key="index"
                    >
                        <addPhoto
                            ref="AddPhoto"
                            :pList="item.img"
                            :batchid="index"
                            :idyun="idyun"
                            actType="5"
                            @uploadAavatar="uploadAavatar"
                        ></addPhoto>
                        <div
                            v-if="item.img[0].url"
                            class="img-del"
                            @click="imgDelFun(index)"
                        >
                            删除
                        </div>
                    </div>
                </div>
            </el-form-item> -->
            <el-form-item label="上传图片">
                <div class="img-box">
                    <div class="img-box-item" 
                        v-for="(item, index) in form.info" :key="index" >
                        <div class="img-box-div" @click="chooseImg(index)">
                            <text class="icon-font search-icon">&#xe606;</text>
                            <img v-if="item.img[0].url" :src="item.img[0].url" alt="">
                        </div>
                        <div
                            v-if="item.img[0].url"
                            class="img-del"
                            @click="imgDelFun(index)"
                        >
                            删除
                        </div>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <!-- 图片裁剪 -->
        <imageCropper
            v-if="false"
            ref="imageCroppers"
            :src="editUrl"
            @confirm="confirm"
            @cancel="cancel"
        >
        </imageCropper>
    </div>
</template>

<script>
import uploadPic from "@/js/upload/UploadPic.js";
import staticConst from "@/js/const/StaticConst.js";

import imageCropper from "@/components/comm/ImageCropper.vue";
import addPhoto from "@/components/comm/AddPhoto.vue";

export default {
    props: ["is_drawer", "idyun"],
    components: { imageCropper, addPhoto },
    computed: {},
    data() {
        return {
            form: {},
            batchid: "",
            editUrl: "",
        };
    },
    created() {},
    mounted() {},
    methods: {
        chooseImg(index){
            console.log(index,'indexwwqwe')
            let that = this;
            uploadPic.idyun = this.idyun;
            // uploadPic.activeId = 1;
            uploadPic.type = staticConst.UPLOAD_INTER_ACTIVE;
            uploadPic.uploadSussecc = uploadSuccess;
            uploadPic.chooseImage1(callBack);
            function callBack(data)
            {
                that.url = data.url;  //显示图片
            }
            
            function uploadSuccess(data)
            {
                that.newUploadPicSuccess(data,index)
                // let obj = {};
                // obj.act= that.act;
                // obj.url = data.url;
                // obj.baseUrl = data.name;
                // that.$emit("editAdBg",obj);
            }
        },
        initData(data) {
            this.form = data;
        },
        imgDelFun(index) {
            if (
                this.form.info.length == 9 &&
                this.form.info[this.form.info.length - 1].img[0].url
            ) {
                this.form.info.splice(index, 1);
                this.form.info.push({
                    img: [
                        {
                            url: "",
                            urls: "",
                        },
                    ],
                });
            } else {
                this.form.info.splice(index, 1);
            }
        },

        /*****新上传图片成功*****/
        newUploadPicSuccess(result, batchid) {
            this.form.info.map((v, i) => {
                if (i == batchid) {
                    console.log(i,batchid,'batchidbatchidbatchidbatchid')
                    v.img[0].url = result.url;
                    v.img[0].urls = result.name;
                }
            });
            console.log(this.form.info,'this.form.info')
            if (
                this.form.info.length < 9 &&
                batchid == this.form.info.length - 1
            ) {
                this.form.info.push({
                    img: [
                        {
                            url: "",
                            urls: "",
                        },
                    ],
                });
            }
			// this.$forceUpdate();
        },

        /*****上传图片成功*****/
        uploadPicSuccess(index, name, result, batchid) {
            if (batchid == this.batchid) {
                this.form.info.map((v, i) => {
                    if (i == batchid) {
                        v.img[0].url = result.url;
                        v.img[0].urls = result.name;
                    }
                });
                if (
                    this.form.info.length < 9 &&
                    this.batchid == this.form.info.length - 1
                ) {
                    this.form.info.push({
                        img: [
                            {
                                url: "",
                                urls: "",
                            },
                        ],
                    });
                }
            }
			this.$forceUpdate();
        },
        /*******上传头像*******/
        uploadAavatar(data, batchid) {
            this.editUrl = data.url;
            this.batchid = batchid;
            console.log(this.editUrl, batchid,'uploadAavataruploadAavatar')
        },
        /*****确认编辑图片****/
        confirm(data) {
            this.$refs.AddPhoto[this.batchid].confirm(
                data,
                this.uploadPicSuccess
            );
        },
        //图片取消上传
        cancel() {
            this.$refs.AddPhoto[this.batchid].cancel();
        },
    },
};
</script>

<style lang="scss" scoped >
.content-box {
    padding: 10px;
    .img-box {
        display: flex;
        flex-wrap: wrap;
        ::v-deep.img-row {
            width: 100px;
            height: 150px;
            margin-right: 20px;
            .uploader-box {
                margin-top: 0;
            }
            .img-del {
                text-align: center;
                color: #f36b6e;
                cursor: pointer;
                line-height: 20px;
            }
        }
        .img-box-item {
            margin: 0  15px 20px 0;
            &:last-child {
                margin-right: 0;
            }
            .img-del {
                text-align: center;
                color: #f36b6e;
                cursor: pointer;
                line-height: 20px;
                margin-top: 10px;
            }
        }
        .img-box-div {
            width: 100px;
            height: 100px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #EEEEEE;
            cursor: pointer;
            > img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 8px;
            }
            > .search-icon {
                font-size: 20px;
                color: #999999;
            }
           
        }
    }
}
</style>
